<template>
  <el-dialog :title="formData.id ? '编辑服务' : '新增服务'" v-model="dialogVisible" width="500px" @close="handleClose">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入服务标题" />
      </el-form-item>
      <el-form-item label="照片数量" prop="photoCount">
        <el-input-number v-model="formData.photoCount" :min="0" :controls="false" placeholder="请输入要求上传照片数量" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input-number v-model="formData.price" :min="0" :controls="false" placeholder="请输入价格" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="formData.isDeletable" class="delete" type="danger" @click="handleDelete">删除</el-button>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { postSku, putSku, deleteSku } from "@/api"
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['submit'])

const dialogVisible = ref(false)
const formRef = ref(null)

const formData = reactive({
  id: undefined,
  title: '',
  price: undefined
})

const rules = {
  title: [
    { required: true, message: '请输入服务标题', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  photoCount: [
    { required: true, message: '请输入要求上传照片数量', trigger: 'blur' },
  ]
}

const open = (data = {}) => {
  // 重置表单数据
  Object.assign(formData, {
    id: undefined,
    title: '',
    price: undefined
  })

  // 如果有传入数据，则更新表单
  if (data && Object.keys(data).length > 0) {
    Object.assign(formData, data)
  }

  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
  formRef.value?.resetFields()
}

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      if (!formData.id) {
        await postSku(formData)
      } else {
        await putSku(formData)
      }
      emit('submit')
      handleClose()
    } catch (error) {
      ElMessage.error(error.message)
    }
  })
}

const handleDelete = () => {
  ElMessageBox.confirm(
    `确认删除【${formData.title}】？`,
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try {
        await deleteSku(formData.id)
        emit('submit')
        handleClose()
      } catch (error) {
        ElMessage.error(error.message)
      }
    })
    .catch(() => {
    })

}

// 暴露方法给父组件
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;

  .delete {
    margin: 0 auto 0 20px;
  }
}

:deep(.el-input-number) {
  width: 100%;

  .el-input__inner {
    // width: 200px;
    text-align: left !important;
  }
}
</style>